<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷你Vue</title>
    <script src="./watcher.js"></script>
    <script src="./dep.js"></script>
    <script src="./observer.js"></script>
    <script src="./compiler.js"></script>
    <script src="./vue.js"></script>
    <style>
        .highlight {
            color: rgb(35, 1, 116)
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- 基础数据 -->
        <h3 class="highlight">基础数据</h3>
        <p>{{ count }}</p>
        <p>{{ date }}</p>
        <button id="btn">更新时间</button>
        <hr>

        <!-- 递归数据 -->
        <h3 class="highlight">递归数据</h3>
        <h4><span>{{name}}</span>的朋友</h4>
        name: <span>{{ friend.name }}</span><br>
        age: <span>{{ friend.age }}</span>

        <h4><span>{{name}}</span>的朋友的狗</h4>
        name: <span>{{ friend.dog.name }}</span><br>
        age: <span>{{ friend.dog.age }}</span>
        <hr>

        <!-- 自定义指令 -->
        <h3 class="highlight">自定义指令</h3>
        <p v-text="name"></p>
        <input type="text" v-model="name">
        <p v-show="show">我会隐身</p>

    </div>

    <script>
        const app = new MyVue({
            // 左手绑着视图
            el: '#app',

            // 右手绑着数据
            data: {
                count: 0,
                date: new Date().toString(),
                name: "黑哥",
                show: true,
                friend: {
                    name: "耀哥",
                    age: 18,
                    dog: {
                        name: "臭皮",
                        age: 3
                    }
                }
            }
        })
        // console.log(Object.keys(app));
        // console.log("app=",app);
        // console.log("app.wife.friends.count=",app.wife.friends.count);

        setInterval(() => {
            app.count += 1
            app.friend.age++
            app.friend.dog.age++
            app.show = !app.show
        }, 1000);

        btn.onclick = function (e) {
            app.date = new Date()
        }

    </script>
</body>

</html>